{% extends '../../common/layouts/layout.tpl' %}
{% block content %}
    <div class="main_content">
        <div class="main_content_holder">
            <div id="fund">
                <div class="main_head">
                    <div class="main_head_unit">
                        客户列表
                    </div>
                    <div id="search_box">

                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <input type="text" name="customer_name"  placeholder="客户姓名" autocomplete="off" class="layui-input">
                                </div>

                                <div class="layui-inline">
                                    <input type="text" name="mobile" placeholder="手机号码" autocomplete="off" class="layui-input">
                                </div>

                                <div class="layui-inline">
                                    <input type="text" name="customer_no"  placeholder="客户编号" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline">
                                    <input class="layui-input" id="start_time" name="start_time" placeholder="开始时间" type="text" value="" >
                                </div>
                                <div class="layui-inline">
                                    -
                                </div>
                                <div class="layui-inline">
                                    <input class="layui-input" id="end_time" name="end_time" placeholder="结束时间" type="text" value="">
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search_btn">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>

                            </div>
                        </form>

                    </div>

                </div>
                <div class="main_page_Info">
                    <table id="demo" class="layui-hide"></table>
                    <div class="page">

                    </div>
                </div>
            </div>
        </div>
    </div>>
{% endblock %}
{% block js_assets %}
    <script>
        function showDetail(customer_id) {
            // 页面跳转到页面传参方式
            //在服务端 通过req.query.cid 获取
            window.location.href ="/sale/customer/detail/?cid="+ customer_id;
        }
        var tableIns;
        layui.use(['laydate','table'], function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start_time' //指定元素
            });
            laydate.render({
                elem: '#end_time' //指定元素
            });


            var table = layui.table;

            //第一个实例
            tableIns= table.render({
                elem: '#demo'
                ,url: '/sale/customer/list' //数据接口
                ,method:'POST'
                ,page: true //开启分页
                ,cols: [[ //表头

                    {field: 'gmt_create', title: '注册时间',sort:true, align:'center',fixed: 'left',},
                    {field: 'customer_name', title: '姓名', align:'center',width:150,templet:function (row) {
                        return '<a onclick="showDetail(\''+row.id+'\')"  href="javascript:;">' + row.customer_name + '</a>'
                    } }
                    ,{field: 'mobile', title: '手机号码', align:'center'}
                    ,{field: 'mobile', title: '账户编号', align:'center'}
                    ,{field: 'mobile', title: '认证状态', align:'center'}
                ]],
                response: {
                    statusName: 'status' //数据状态的字段名称，默认：code
                    , statusCode: 200 //成功的状态码，默认：0
                    , msgName: 'msg' //状态信息的字段名称，默认：msg
                    , countName: 'count' //数据总数的字段名称，默认：count
                    , dataName: 'datas' //数据列表的字段名称，默认：data
                }
            });

            //监听搜索按钮
            var form = layui.form;
            form.on('submit(search_btn)', function (data) {
                search(data.field);
                return false;
            });

            function search(search_form_data) {
                tableIns.reload({
                    where: { //设定异步数据接口的额外参数，任意设
                        customer_name: search_form_data.customer_name,
                        mobile: search_form_data.mobile,
                        customer_no: search_form_data.customer_no,
                        start_time: search_form_data.start_time,
                        end_time: search_form_data.end_time
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }

        });
    </script>
{% endblock %}